<template>
  <div id="app">
    <input ref="input1" @keyup.enter="addValue" class="edit" type="text"  v-model.trim="value"/>
    <div class="list" v-if="list.length>0">
      <div class="unit" v-for="item in list " :key="item.id">
        <input class="check-box" v-if="item.isInput" type="checkbox" :checked="item.isDone" @change="editDone(item.id)" />
        <span v-if="item.isInput" :class="{finish:item.isDone}">{{item.content}}</span>
        <input v-else type="text" ref="showInput" v-model="item.content"  @keyup.enter="changeValue(item.id)" >
       
        <div class="btn-box">
          <span  class="btn edit-btn" v-if="!item.isDone" @click="editValue1(item.id)">{{item.isInput?'编辑':'保存'}}</span>
          <span  class="btn del-btn" @click="delValue(item.id)">删除</span>
         
        </div>
      </div>
    </div>
    <p class="empty" v-else>暂无任务</p>
  </div>
</template>

<script>


export default {
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list111'))||[],
      value:'',
      
      
    };
  },
  mounted(){
    this.$refs.input1.focus()
  },
  watch:{
    list:{
      handler(){
      localStorage.setItem('list111',JSON.stringify(this.list))
    },
    deep:true
    }
  },
  methods: {
    addValue(){
      if(!this.value) return alert('请先输入内容')
      this.list.unshift({
        id:Date.now(),
        content:this.value,
        isDone:false,
        isInput:true
      })
      this.value=''
      
    },
    changeValue(id){
      this.list.forEach((item )=>{
         if(item.id===id){
           item.isInput=true
           console.log(1);
         }
       })
      console.log(id);
    },

    editDone(id){
      this.list.forEach((item )=>{
        if(item.id===id){
          item.isDone=!item.isDone
        }
      })
    },
    
    delValue(id){
      this.list=this.list.filter((item)=>{
        return item.id!==id
      })
      
    },
    editValue1(id){
this.list.forEach((item )=>{
  if(item.id===id){
    item.isInput=!item.isInput
    this.$nextTick(function(){
      this.$refs.showInput[0].focus()
    })
    
  }
  
})

    }

    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.edit{
  display: block;
  width: 50%;
  height: 35px;
  line-height: 35px;
  margin: 30px auto;
  box-sizing: border-box;
  padding-left: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: 0;
  box-shadow: 0 0 5px #ccc;
}
.list{
  margin: 0 auto;
  width: 50%;
}
.unit{
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
}
.unit:last-child{
  border-bottom: 0;/*最后一条list的底框不用显示*/
}
.finish{
  text-decoration: line-through;
  color:#ccc;
}
.btn-box {
  position: absolute;
  right: 0;
}
.btn {
  text-decoration: none;
  border: 0;
  outline: 0;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}
.edit-btn {
  background: #42b983;
  margin-right: 5px;
}
.del-btn{
  background: red;
}
.empty{
  font-size: 13px;
  color: #ccc;
  text-align: center;
  padding: 10px 0;
}
.check-box {
  margin-right: 5px;
}
</style>